<template>
  <div class="topBox">
    <div class="L"><a href="index.html">LOGO</a></div>
    <div class="C">
      <div class="saerchbox">
        <input name="" type="text" placeholder="请输入您要搜索的内容" /><img
          src="/assets/images/ss.png"
        />
      </div>
    </div>
    <div class="R">
      <a href="map.html"><img src="/assets/images/map.png" /></a>
    </div>
  </div>
  <div class="clear"></div>
  <div class="aui-m-slider">
    <div class="m-slider" data-ydui-slider>
      <van-swipe :autoplay="3000" lazy-render class="my-swipe">
        <van-swipe-item v-for="image in HotList" :key="image">
          <img :src="image.thumb_cdn" />
        </van-swipe-item>
      </van-swipe>
      <div class="slider-pagination"></div>
    </div>
  </div>
  <div class="clear"></div>
  <div class="lqgwBox">
    <ul>
      <li>
        <router-link to="/product/product/index"
          ><img src="/assets/images/quanbu.png" />
          <p>全部商品</p>
        </router-link>
      </li>
      <li>
        <a href="live.html"
          ><img src="/assets/images/zibo.png" />
          <p>商品直播</p>
        </a>
      </li>
      <li>
        <a href="coupon.html"
          ><img src="/assets/images/youhui.png" />
          <p>优惠活动</p>
        </a>
      </li>
      <li>
        <router-link to="/product/product/top"
          ><img src="/assets/images/bandan.png" />
          <p>榜单排行</p>
        </router-link>
      </li>
    </ul>
  </div>
  <div class="clear"></div>
  <div class="contitbox">
    <p>新品<span>•</span>推荐</p>
  </div>
  <div class="clear"></div>
  <ul class="proul">
    <li v-for="item in RecommendList" :key="item.id">
      <div class="con">
        <router-link
          :to="{ path: '/product/product/info', query: { proid: item.id } }"
        >
          <img :src="item.thumb_cdn" />
          <p><span>￥</span>{{ item.price }}</p>
        </router-link>
      </div>
    </li>
  </ul>
  <div class="clear"></div>
  <div class="h54"></div>
  <div class="clear"></div>

  <Footer />
</template>

<script setup>
import Footer from "./common/Footer.vue";
import { onBeforeMount, ref } from "vue";

const { proxy } = getCurrentInstance();

// const images = ref([
//   "http://127.0.0.1:5173/assets/images/banner.jpg",
//   "http://127.0.0.1:5173/assets/images/banner.jpg",
//   "http://127.0.0.1:5173/assets/images/banner.jpg",
//   "http://127.0.0.1:5173/assets/images/banner.jpg",
// ]);

//轮播图
const HotList = ref([]);
const RecommendList = ref([]);

onBeforeMount(() => {
  getHomeData();
});

const getHomeData = async () => {
  let result = await proxy.$post({
    url: "/index/home",
  });

  if (result.code === 1) {
    HotList.value = result.data.hotList;
    RecommendList.value = result.data.recommendList;
  }
};
</script>

<style>
.my-swipe{
  width: 400px;
  height: 300px;
}
.my-swipe img{
  width: 400px;
  height: 300px;
}
</style>